<template>
  <!--  <header>-->

  <!--    <div class="wrapper">-->

  <!--&lt;!&ndash;      <nav>&ndash;&gt;-->
  <!--&lt;!&ndash;        <RouterLink to="/">Home</RouterLink>&ndash;&gt;-->
  <!--&lt;!&ndash;        <RouterLink to="/about">About</RouterLink>&ndash;&gt;-->
  <!--&lt;!&ndash;      </nav>&ndash;&gt;-->
  <!--    </div>-->
  <!--  </header>-->

  <!--  <RouterView />-->
  <div id="app">
<!--    <HyForm/>-->

<!--    <HyTable/>-->
    <HyIndex
      :table-config="elTableConfig"
      :form-config="formJson"
    />

<!--    <input />-->
<!--    <button>哈哈</button>-->
  </div>
</template>
<script setup lang="ts">
// import HyForm from "@/components/HyForm.vue";
import type {Form} from "@/type";
import {h, reactive} from "vue";
import {el} from "element-plus/es/locale";
// @ts-ignore
import HyIndex from "@/components/HyIndex.vue";
import type HyFormInterface from "@/interface/HyFormInterface";
import type HyTableInterface from "@/interface/HyTableInterface";
// @ts-ignore
import Test from "@/components/Test.vue";
// const formList:(Form.haha|Form.xixi)[]=[
//   {
//     inputType: "xixi",
//     type1:"b"
//   },
//   {
//     inputType: "select",
//     type1: "c",
//   },
// ]
// function addDom() {
//   h(renderDom, { onClick: () => copyHandleClick(el.innerText), style: { cursor: 'copy' } })
// }
//
// render(iconCopy, el);
// defineProps({
//
// })
//定义表单对象
interface UserInsertVO {
  phone: string,
  password: string,
}
//freeze表示只能使用,不能修改
// const aa=Object.freeze({
//   name:"liuyi"
// });
const formJson = reactive<HyFormInterface>({
  formModelList:[
    {
      inputType:"input",
      id:"my-input",
      field:"phone",
      label:"手机号码",
      rule:[{required: true,message:"手机号码为必填字段", trigger:"blur"}],
      onChange:(value:any)=>{
        console.log(79, value);
      },
    },
    {
      inputType:"input",
      field:"password",
      label:"登录",
      rule:[{required: true,message:"手机号码为必填字段", trigger:"change"}],
      showPassword:true,
    },
    {
      label:"国籍",
      inputType:"select",
      inputStyle:"width: 300px;",
      field:"sex",
      optionList:[
        {
          id: 1,
          title:"男",
          value:0
        },
        {
          id: 2,
          title:"女",
          value:1
        },
      ],
      optionValueField:"dictValue",
      optionKeyField:"sysDictDataId",
      optionLabelField:"dictLabel",
      placeholder:"哈哈",
      url:"/sysDictData/page",
      params:{
        pageNum:1,
        pageSize:10,
        dictType:"area_type"
      },
      requestCallback:function (config:any) {
        //这里暂时无法修改其属性
        config.params.pageSize=1;
      },
      responseCallback:function (value:any) {
      }
    },
    {
      inputType:"date",
      label:"出生年月",
      field:"birth",
      type:"daterange",
      valueFormat:"YYYY-MM-DD",
      dateFormat:"YYYY-MM-DD",
      placeholder:"请选择出生年月",
      startDateField:"startTime",
      endDateField:"endTime",
      onChange:(value:any)=>{
        console.log(131, value);
      },
    },
    {
      inputType:"upload",
      label:"头像",
      field:"portrait",
      url:"http://www.yhuayi.com:8081/upload/file",
      uploadField:"file",
      promptInformation:"jpg/png files with a size less than 500kb",
      onChange:(uploadFile,uploadFiles) => {
        console.log(257, uploadFile, uploadFiles);
      },
      splicingSymbol:",",
      showPassword:true,
      name: "fileId",
      isDownloadFile: true,
      fileList:[
        {
          name:"喜喜",
          url:"https://bucket-yufei.oss-cn-beijing.aliyuncs.com/03_masu_gaduation/2024_07_01/09e1babeaa73437aa29179c0ce256e39headgirl.jpg",
        },
        {
          name:"哈哈",
          url:"https://bucket-yufei.oss-cn-beijing.aliyuncs.com/03_masu_gaduation/2024_07_01/10ec0c0be7224c4b853d017e628dd3ddhaimianbaobao.jpg",
        },
      ],
      fileUrlNameField:"url",
    },
    {
      field:"aa",
      inputType: "custom",
      component: Test,
      label:"哈哈哈",
      value:"我是value",

    },
    {
      inputType:"tree",
      field:"deptId",
    },
  ],
  labelWidth:200,
  itemWidth:300,
  url:"/user/insert",
  method:"post",
  size:"large",
  submitBtnTitle: "注册",
  cancelBtnTitle: "退出",
  // requestCallback:(formParamsObj, formEl)=>{
  //   console.log(141, formParamsObj);
  // },
  responseCallback:(result:any)=>{
    console.log(385, result);
  },
});


const elTableConfig=reactive<HyTableInterface>(
  {
    url:"user/page",
    isSelectionByRow: true,
    selection: true,
    externalBtnList:[
      {
        operationType:"custom",
        label:"查看",
        clickCallback:function (rows) {
        },
        size:"large",
      },
      {
        operationType:"custom",
        label:"删除",
        isUpdateTableData: true,
        // clickCallback: async function (rows) {
        //   // console.log(101, rows);
        //   //这里我们使用删除接口,进行测试
        //  // const result=await deleteUserApi(rows.userId);
        // },
        size:"large"
      }
    ],
    internalBtnList:[
      {
        operationType:"custom",
        label:"查看",
        clickCallback:function (rows) {
        },
        size:"large",
        text: true,
      },
    ],
    column:[
      {
        prop:"cover",
        label:"用户头像",
        columnShowCallback:function (rows, index) {
          return `<img style="width: 100px;height: 100px;" src="${rows.cover}"/>`;
        }
      },
      {
        prop:"phone",
        label:"电话号码",
      },
      {
        prop:"nickname",
        label:"用户昵称",
      },
      {
        prop: "realname",
        label: "用户真实姓名",
      },
      {
        prop:"birthday",
        label:"用户生日",
      },
      {
        prop:"introduction",
        label:"用户介绍",
        showOverflowTooltip:true,
      },
    ],
    isShowPagination:true,
    paginationConfig:{
      background: true,
    }
  }
);


</script>

<style scoped>
#app{
  margin: 0 auto;
}
</style>
